<template>
	<div class="authentication navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="a_from">
			<div class="af_item">
				<div>
					<span>姓名</span>
					<input v-if="status == 0" v-model="post_data.user_realname" placeholder="请输入真实姓名" type="text">
					<input v-if="status == 1" readonly v-model="post_data.user_realname" placeholder="请输入真实姓名" type="text">
				</div>
				<img src="../../assets/user/go.png" alt="">
			</div>
			<div class="af_item">
				<div>
					<span>身份证号码</span>
					<input v-if="status == 0" v-model="post_data.sfz_nums" placeholder="请输入身份证号码" type="text">
					<input v-if="status == 1" readonly v-model="post_data.sfz_nums" placeholder="请输入身份证号码" type="text">
				</div>
				<img src="../../assets/user/go.png" alt="">
			</div>
			<div class="af_upload">
				<div class="afu_title">
					上传证件
				</div>
				<div class="afu_upload">
					<div>
						<input v-if="status == 0" accept="image/*" type="file" @change="upload(0,$event)">
						<input v-if="status == 1" disabled accept="image/*" type="file" @change="upload(0,$event)">
						<div v-if="post_data.sfz_zpic == ''">
							<img src="../../assets/user/sfzf.png" alt="">
						</div>
						
						<img class="up_img" v-if="post_data.sfz_zpic" :src=" 'http://www.facai888008.cn/' + post_data.sfz_zpic" alt="">
						
						<p>身份证正面</p>
					</div>
					<div>
						<input v-if="status == 0" accept="image/*" type="file"  @change="upload(1,$event)">
						<input v-if="status == 1" disabled accept="image/*" type="file"  @change="upload(1,$event)">
						<div v-if="post_data.sfz_fpic == ''">
							<img src="../../assets/user/sfzz.png" alt="">
						</div>
						
						<img class="up_img" v-if="post_data.sfz_fpic" :src=" 'http://www.facai888008.cn/' + post_data.sfz_fpic" alt="">
						
						<p>身份证反面</p>
					</div>
				</div>
			</div>
			<button @click="shiming" v-if="status == 0">确认</button>
		</div>
	</div>
</template>

<script>
	export default{
		name:"authentication",
		async created(){
			
			if(!this.$store.state.user_info){
			
				try{
					
					const data = await this.$apis.User.xinxi()
					
					this.user_info = data.data
					
					this.$store.state.user_info = data.data
					
					if(this.user_info.user_realname){
						
						this.status = 1
					
						this.post_data.user_realname = this.user_info.user_realname
						
						this.post_data.sfz_nums = this.user_info.sfz_nums
					
						this.post_data.sfz_fpic = this.user_info.sfz_fpic
					
						this.post_data.sfz_zpic = this.user_info.sfz_zpic
						
					}else{
						
						this.status = 0
					}
					
				}catch(e){
					//TODO handle the exception
				}
				
			}else{
				
				this.user_info = this.$store.state.user_info
				
				if(this.user_info.user_realname){
				
					this.status = 1
					
					this.post_data.user_realname = this.user_info.user_realname
					
					this.post_data.sfz_nums = this.user_info.sfz_nums
				
					this.post_data.sfz_fpic = this.user_info.sfz_fpic
				
					this.post_data.sfz_zpic = this.user_info.sfz_zpic
					
				}else{
					this.status = 0
				}
			}
		},
		data(){
			return{
				post_data:{
					// 真实姓名
					user_realname:"",
					
					// 身份证号码
					sfz_nums:"",
					
					// 身份证反面
					sfz_fpic:"",
					
					// 身份证正面
					sfz_zpic:""
				},
				
				user_info:"",
				
				// 0 暂未认证 1 已认证
				status:1
			}
		},
		methods:{
			async shiming(){
				
				if(this.post_data.user_realname.trim().length < 2 || this.post_data.user_realname.trim().length > 12) return this.$toast("请输入正确的姓名!");
				
				if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.post_data.sfz_nums)) return this.$toast("请输入正确身份证号码!");
				
				if(this.post_data.sfz_fpic == "" || this.post_data.sfz_zpic == "") return this.$toast("证件请上传齐全!");
				
				try{
					
					const data = await this.$apis.User.shiming(this.post_data)
					
					this.$toast(data.msg)
					
				}catch(e){
					//TODO handle the exception
					this.$toast(e.msg)
				}
				
			},
			
			async upload(type,e){
				
				let img = e.target.files[0]
				
				let post_data = new FormData()
				
				post_data.append("file",img)
				
				try{
					
					const data = await this.$apis.User.uploadImg(post_data)
					
					this.$toast(data.msg)
					
					// console.log(data)
					
					type == 0 ? this.post_data.sfz_zpic = data.info : this.post_data.sfz_fpic = data.info
					
				}catch(e){
					//TODO handle the exception
				}
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	
	.a_from{
		.af_item{
			padding: .3rem .4rem .3rem .35rem;
			box-sizing: border-box;
			justify-content: space-between;
			display: flex;
			align-items: center;
			font-size: .28rem;
			color: #94E9FF;
			border-bottom: 1px solid #1A304F;
			
			div{
				display: flex;
				align-items: center;
			}
			
			span{
				width: 1.7rem;
			}
			
			input{
				border: none;
				outline: none;
			}
			
			input::placeholder{
				color: #3A627E;
			}
			
		}
		
		.af_upload{
			.afu_title{
				font-size: .28rem;
				color: #94E9FF;
				margin: .3rem 0 .3rem .36rem;
			}
			
			.afu_upload{
				font-size: .24rem;
				color: #94E9FF;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				
				input{
					opacity: 0;
					position: absolute;
					width: 100%;
					height: 100%;
				}
				
				img{
					width: 2.92rem;
					height: 1.85rem;
					border-radius: .2rem;
				}
				
				>div:nth-child(1){
					margin-right: .3rem;
					position: relative;
				}
				
				div{
					width: 2.92rem;
					
					p{
						margin-top: .18rem;
						text-align: center;
					}
				}
				
				.up_img{
					object-fit: cover;
				}
			}
		}
		
		button{
			width:6rem;
			height:.72rem;
			background:rgba(17,34,58,1);
			box-shadow:inset 0px 0px .3rem 0px rgba(28,176,212,1);
			border-radius:.2rem;
			border: none;
			outline: none;
			font-size: .28rem;
			color:#94E9FF ;
			margin: auto;
			display: block;
			margin-top: 1.16rem;
		}
	}
</style>
